<template>
    <div class="commoncon trade personalHome" style="overflow: visible;">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <div class="comcont" :class="theme?'night':'daytime'" style="padding-bottom:160px;padding-top:70px;">
            <!--交易区-->
            <div class="contentTop">
                <!--交易区右侧-->
                <div class="right">
                    <div class="coinpair clearfix">
                        <a :class="quoteCurrencyName=='Auto'?'active':''" @click="quoteCurrencyName='Auto'">{{$t('l.trade_1')}}</a>
                        <a :class="quoteCurrencyName=='ETH'?'active':''" @click="quoteCurrencyName='ETH'">ETH</a>
                        <a :class="quoteCurrencyName=='BTC'?'active':''" @click="quoteCurrencyName='BTC'">BTC</a>
                        <a :class="quoteCurrencyName=='USDT'?'active':''" @click="quoteCurrencyName='USDT'">USDT</a>
                        <a :class="quoteCurrencyName=='HKDT'?'active':''" @click="quoteCurrencyName='HKDT'">HKDT</a>
                    </div>
                    <div class="actions clearfix">
                        <div class="searchput small fl">
                            <input :placeholder="$t('l.trade_2')" v-model="likecoin">
                            <i></i>
                        </div>
                        <label class="checkbox fl" :class="checktype==1?'active':''" for="updown" @click="checktype=1">
                            <input id="updown" name="checktype" type="radio" v-show="false">
                            {{$t('l.trade_3')}}
                        </label>
                        <label class="checkbox fl" :class="checktype==2?'active':''" for="volume" @click="checktype=2">
                            <input id="volume" name="checktype" type="radio" v-show="false">
                            {{$t('l.trade_4')}}
                        </label>
                    </div>
                    <div class="coin-switch-content">
                        <dl>
                            <dt>
                                <span class="currency">{{$t('l.trade_5')}}</span>
                                <span class="price">{{$t('l.trade_6')}}</span>
                                <span class="rate" v-show="checktype==1">{{$t('l.trade_3')}}</span>
                                <span class="rate" v-show="checktype==2">{{$t('l.trade_7')}}</span>
                            </dt>
                            <dd class="cs-list upper online" style="height:380px;" ref="scrollwrap">
                                <div class="scrollwrap">
                                    <div v-for="(item,index) in symbols" :key="index">
                                        <div class="flex" v-if="item.quoteCurrencyName==quoteCurrencyName && item.symbol.includes(likecoin.toUpperCase())" @click="changeSymbols(item.baseCurrencyName+item.quoteCurrencyName)">
                                            <i class="icon_marked unmarked" :class="item.isWatch == true  ? 'active' :''" @click.stop="watchListEditRequest(item.symbol,!item.isWatch)"></i>
                                            <span class="currency">{{item.baseCurrencyName}}/{{item.quoteCurrencyName}}</span>
                                            <span class="price">{{item.price.toFixed(item.priceDisplayDp)}}</span>
                                            <!-- <span class="rate up" v-if="item.changeFor24H==0">{{Number(item.changeFor24H).toFixed(2)}}</span> -->
                                            <span class="rate up" v-show="checktype==1" :class="item.changeFor24H >= 0 ? 'up' : 'down'">{{item.changeFor24H > 0 ? '+' + item.changeFor24H : item.changeFor24H}}%</span>
                                            <span class="volume" v-show="checktype==2">{{item.volume}}</span>
                                        </div>
                                        
                                        <div class="flex" v-else-if="quoteCurrencyName=='Auto' && item.isWatch == true && item.symbol.includes(likecoin.toUpperCase())" @click="changeSymbols(item.baseCurrencyName+item.quoteCurrencyName)">
                                            <i class="icon_marked unmarked" :class="item.isWatch == true  ? 'active' :''" @click.stop="watchListEditRequest(item.symbol,!item.isWatch)"></i>
                                            <span class="currency">{{item.baseCurrencyName}}/{{item.quoteCurrencyName}}</span>
                                            <span class="price">{{item.price.toFixed(item.priceDisplayDp)}}</span>
                                            <!-- <span class="rate up" v-if="item.changeFor24H==0">{{Number(item.changeFor24H).toFixed(2)}}</span> -->
                                            <span class="rate up" v-show="checktype==1" :class="item.changeFor24H >= 0 ? 'up' : 'down'">{{item.changeFor24H > 0 ? '+' + item.changeFor24H : item.changeFor24H}}%</span>
                                            <span class="volume" v-show="checktype==2">{{item.volume}}</span>
                                        </div>  
                                    </div>    
                                </div>
                            </dd>
                        </dl>
                    </div>
                    <p class="transTitle">{{$t('l.trade_8')}}</p>
                    <div class="transbar">
                        <div class="list">
                            <p class="fillPrice" v-for="(item,index) in tradeRecord" :key="index">
                                <span :class="item.takerSide=='S'?'red':'green'">{{item.price}}</span>
                                <span>{{item.size}}</span>
                                <span>{{item.time}}</span>
                            </p>
                        </div>    
                    </div>
                </div>
                <!--交易区左侧-->
                <div class="left">
                    <div class="modHead clearfix">
                        <p class="symbolName"><a>{{quote.baseCurrencyName}}</a><span>/ {{quote.quoteCurrencyName}}</span></p>
                        <span class="levernum">5X杠杆</span>
                        <div class="priceContainer">
                            <span class="newprice">{{$t('l.trade_9')}}</span>
                            <span class="estimate" v-bind:class="{ up: quote._class == 'up',down: quote._class == 'down'}">{{quote.close}}<a>≈￥{{quote.closeDefeat}}</a></span>
                        </div>
                        <div class="info24">
                            <p class="title">{{$t('l.trade_10')}}</p>
                            <p class="val" v-bind:class="{ up: quote._class == 'up',down: quote._class == 'down'}">{{currentPair.changeFor24H}} %</p>
                        </div>
                        <div class="info24">
                            <p class="title">{{$t('l.trade_11')}}</p>
                            <p class="val">{{quote.high}}</p>
                        </div>
                        <div class="info24">
                            <p class="title">{{$t('l.trade_12')}}</p>
                            <p class="val">{{quote.low}}</p>
                        </div>
                        <div class="info24">
                            <p class="title">{{$t('l.trade_13')}}</p>
                            <p class="val">{{quote.volume}} {{quote.baseCurrencyName}}</p>
                        </div>
                        <div class="modetype" :class="theme?'active':''">
                            <span class="daytime" @click="theme = false"></span>
                            <span class="night" @click="theme = true"></span>
                        </div>
                    </div>
                    <div class="global-exchange clearfix">
                        <div class="global-trades">
                            <div class="tradesmode clearfix">
                                <a :class="pricmode == 0?'active':''" @click="pricmode=0">{{$t('l.trade_14')}}</a>
                                <a :class="pricmode == 1?'active':''" @click="pricmode=1">{{$t('l.trade_15')}}</a>
                                <a :class="pricmode == 2?'active':''" @click="pricmode=2">{{$t('l.trade_16')}}</a>
                            </div>
                            <div class="mod-body">
                                <dl>
                                    <dt>
                                        <span class="price">{{$t('l.trade_17')}} ({{quote.quoteCurrencyName}})</span>
                                        <span class="amount">{{$t('l.trade_18')}} ({{quote.baseCurrencyName}})</span>
                                        <span class="total">{{$t('l.trade_19')}} ({{quote.quoteCurrencyName}})</span>
                                    </dt>
                                    <dd class="now-pric bs" :class="{buy: pricmode == 1,sell: pricmode == 2}">
                                        <div class="ticker-close">
                                            <p :class="{ up: quote._class == 'up',down: quote._class == 'down'}">
                                                {{currentPair.close}} 
                                                <!-- <a v-show="quote._class == 'down'">&#8595</a>
                                                <a v-show="quote._class == 'up'">&#8593</a> -->
                                                <span>≈￥{{currentPair.closeDefeat}}</span>
                                            </p>
                                        </div>
                                        <div class="list asks">
                                            <div>
                                                <p class="fillPrice" v-for="(item,index) in sellSeries" :key="index" @click="click_ask(item)" :style="'background-size:'+item.width+ '100%;'">
                                                    <span>{{item.price}}</span>
                                                    <span>{{item.size}}</span>
                                                    <span>{{item.totalprice}}</span>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="list bids">
                                            <p class="fillPrice" :style="'background-size:'+item.width+ '100%;'" v-for="(item,index) in buySeries" :key="index" @click="click_bid(item)">
                                                <span>{{item.price}}</span>
                                                <span>{{item.size}}</span>
                                                <span>{{item.totalprice}}</span>
                                            </p>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="chartbox" id="layout">
                            <div class="changechart">
                                <span @click="charttype=1" >{{$t('l.trade_20')}}</span>
                                <span @click="charttype=0">TradingView</span>
                            </div>
                            <div class="depthchartbar" v-show="charttype==1">
                                <div class="layout">
                                    <canvas id="depth" width="1600" height="370" ref="chartMask"></canvas>
                                    <canvas id="x" width="1600" height="24"></canvas>
                                    <canvas id="y" width="68" height="370"></canvas>
                                </div>
                            </div>
                            
                            <Tradingview ref="tradbar" :newbar='newbar' :currentPair='currentPair' :theme="theme" v-show="charttype==0"></Tradingview>
                            <!--杠杆信息-->
                            <div class="leverbox">
                                <div class="leverinfo">
                                    <h2>BTC</h2>
                                    <p>可用0.00000000 /锁定0.00000000</p>
                                    <p>已借0.00000000 /利息0.00000000</p>
                                </div>
                                <div class="leverinfo">
                                    <h2>USDT</h2>
                                    <p>可用0.00000000 /锁定0.00000000</p>
                                    <p>已借0.00000000 /利息0.00000000</p>
                                </div>
                                <div class="leverinfo">
                                    <h2>保证金率</h2>
                                    <p>- - -</p>
                                </div>
                                <div class="leverinfo">
                                    <h2>强平价(USDT)</h2>
                                    <p>- - -</p>
                                </div>
                                <div class="leverbtnbox">
                                    <a class="leverbtn">资金划转</a>
                                    <div>
                                        <a class="leverbtn small fl">借币</a>
                                        <a class="leverbtn small fr">还币</a>
                                    </div>
                                </div>
                            </div>
                            <!--交易区-->
                            <div class="tradebox">
                                <div class="trade-panel">
                                    <div class="mod-head clearfix">
                                        <div class="mock-a" :class="tradetype==1?'active':''" @click="changeTradeType(1)">{{$t('l.trade_21')}}</div>
                                        <div class="mock-a" :class="tradetype==2?'active':''" @click="changeTradeType(2)">{{$t('l.trade_22')}}</div>
                                        <div class="mock-a" :class="tradetype==3?'active':''" @click="changeTradeType(3)">{{$t('l.trade_23')}}
                                            <i>
                                                <div class="tips">
                                                    {{$t('l.trade_24')}}
                                                </div>
                                            </i>
                                        </div>
                                    </div>
                                    <div class="mod-body clearfix">
                                        <div class="single-panel limit fl">
                                            <div class="paneltitle clearfix">
                                                <h2 class="fl">{{$t('l.trade_25')}}{{quote.baseCurrencyName}}</h2>
                                                <span class="fr" v-if="usertoken">{{$t('l.trade_26')}}:{{accountInfo.quote_available}} {{quote.quoteCurrencyName}}</span>
                                            </div>
                                            <!--限价-->
                                            <div class="form-box" v-if="tradetype==1">
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_27')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength="" v-model="limit_buy_price"  @keyup="on_input_ask_rate(0)" type="number">
                                                        <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                    </label>
                                                    <p class="convert_cny">≈￥{{convert_buy_cny}}</p>
                                                </div>
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_28')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength="" v-model="limit_buy_size" @keyup="on_input_ask_vol(0)">
                                                        <span class="currency">{{quote.baseCurrencyName}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <!--市价-->
                                            <div class="form-box" v-else-if="tradetype==2">
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_27')}}</span>
                                                    <label class="stop-label">
                                                        <input class="disabled" autocomplete="off" maxlength="" disabled="disabled" v-model="limit_buy_price"  :placeholder="$t('l.add_98')">
                                                        <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                    </label>
                                                </div>
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_28')}}</span>
                                                    <label class="stop-label">
                                                        <input class="disabled" autocomplete="off" maxlength="" disabled="disabled"  v-model="limit_buy_size" @keyup="on_input_ask_vol(0)">
                                                        <span class="currency">{{quote.baseCurrencyName}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <!--止盈止损-->
                                            <div class="form-box" v-else-if="tradetype==3">
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_29')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength="" v-model="buytrigger" @keyup="changebuytrigger_cny">
                                                        <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                    </label>
                                                    <p class="convert_cny">≈￥{{buytrigger_cny}}</p>
                                                </div>
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_30')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength=""  v-model="limit_buy_price"  @keyup="on_input_ask_rate(0)" type="number">
                                                        <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                    </label>
                                                </div>
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_28')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength=""  v-model="limit_buy_size" @keyup="on_input_ask_vol(0)">
                                                        <span class="currency">{{quote.baseCurrencyName}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="price-box" style="margin-bottom:14px;">
                                                <span></span>
                                                <label class="stop-label stop-slider buysolide">
                                                    <el-slider
                                                        v-model="buypercentage"
                                                        :step="1"
                                                        @change="changebuyrage">
                                                    </el-slider>
                                                    <span class="slideval">{{buypercentage}}%</span>
                                                </label>
                                            </div>
                                            <div class="price-box" v-if="usertoken">
                                                <span>{{$t('l.trade_19')}}</span>
                                                <label class="stop-label">
                                                    <input autocomplete="off" maxlength="" type="number" @keyup="on_input_limit_ask_amount" v-model="limit_buy_amount">
                                                    <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                </label>
                                            </div>
                                            <button class="submit bg-buy" v-if="usertoken" @click="placeOrderRequest('B')">{{$t('l.trade_25')}}</button>
                                            <div class="global-btn" v-else>
                                                <div v-show="global_lang=='zh_CN'">请先<router-link to="/login">登录</router-link> 后，进行委托；或前往<router-link to="/register">注册</router-link> 账号</div>
                                                <div v-show="global_lang=='zh_TW'">請先<router-link to="/login">登錄</router-link> 後，進行委託；或前往<router-link to="/register">註冊</router-link> 賬號</div>
                                                <div v-show="global_lang=='en_US'">Please <router-link to="/login">log in</router-link> first, then commission; or go to the <router-link to="/register">registered</router-link> account</div>
                                            </div>
                                        </div>
                                        <div class="single-panel limit fr">
                                            <div class="paneltitle clearfix">
                                                <h2 class="fl">{{$t('l.trade_32')}}{{quote.baseCurrencyName}}</h2>
                                                <span class="fr" v-if="usertoken">{{$t('l.trade_26')}}：{{accountInfo.base_available}} {{quote.baseCurrencyName}}</span>
                                            </div>
                                            <!--限价-->
                                            <div class="form-box" v-if="tradetype==1">
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_27')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength=""  v-model="limit_sell_price" @keyup="on_input_bid_vol(1)" type="number">
                                                        <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                    </label>
                                                    <p class="convert_cny">≈￥{{convert_sell_cny}}</p>
                                                </div>
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_28')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength="" v-model="limit_sell_size" @keyup="on_input_bid_vol(1)" type="number">
                                                        <span class="currency">{{quote.baseCurrencyName}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <!--市价-->
                                            <div class="form-box" v-else-if="tradetype==2">
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_27')}}</span>
                                                    <label class="stop-label">
                                                        <input class="disabled" autocomplete="off" maxlength="" disabled="disabled" v-model="limit_sell_price" :placeholder="$t('l.add_99')">
                                                        <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                    </label>
                                                </div>
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_28')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength="" v-model="limit_sell_size" @keyup="on_input_bid_vol(1)" type="number">
                                                        <span class="currency">{{quote.baseCurrencyName}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <!--止盈止损-->
                                            <div class="form-box" v-else-if="tradetype==3">
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_29')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength=""  v-model="selltrigger" @keyup="changeselltrigger_cny">
                                                        <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                    </label>
                                                    <p class="convert_cny">≈￥{{selltrigger_cny}}</p>
                                                </div>
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_30')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength=""  v-model="limit_sell_price" @keyup="on_input_bid_vol(1)" type="number">
                                                        <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                    </label>
                                                </div>
                                                <div class="price-box">
                                                    <span>{{$t('l.trade_28')}}</span>
                                                    <label class="stop-label">
                                                        <input autocomplete="off" maxlength="" v-model="limit_sell_size" @keyup="on_input_bid_vol(1)" type="number">
                                                        <span class="currency">{{quote.baseCurrencyName}}</span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="price-box" style="margin-top:0px;margin-bottom:14px;">
                                                <span></span>
                                                <label class="stop-label stop-slider sellsolide">
                                                    <el-slider
                                                        v-model="sellpercentage"
                                                        @change="changesellrage"
                                                        :step="1">
                                                    </el-slider>
                                                    <span class="slideval">{{sellpercentage}}%</span>
                                                </label>
                                            </div>
                                            <div class="price-box" v-if="usertoken">
                                                <span>{{$t('l.trade_31')}}</span>
                                                <label class="stop-label">
                                                    <input autocomplete="off" :class="tradetype==2?'disabled':''" :disabled="tradetype==2?true:false"  maxlength="" type="number" @keyup="on_input_limit_bid_amount" v-model="limit_sell_amount" >
                                                    <span class="currency">{{quote.quoteCurrencyName}}</span>
                                                </label>
                                            </div>
                                            <button class="submit bg-sell" v-if="usertoken" @click="placeOrderRequest('S')">{{$t('l.trade_32')}}</button>
                                            <div class="global-btn" v-else>
                                                <div v-show="global_lang=='zh_CN'">请先<router-link to="/login">登录</router-link> 后，进行委托；或前往<router-link to="/register">注册</router-link> 账号</div>
                                                <div v-show="global_lang=='zh_TW'">請先<router-link to="/login">登錄</router-link> 後，進行委託；或前往<router-link to="/register">註冊</router-link> 賬號</div>
                                                <div v-show="global_lang=='en_US'">Please <router-link to="/login">log in</router-link> first, then commission; or go to the <router-link to="/register">registered</router-link> account</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <!--当前委托-->
            <div class="tradetable">
                <div class="tabletitle clearfix">
                    <h2 class="fl">{{$t('l.trade_33')}}<span v-if="orders.userActiveOrders">({{orders.userActiveOrders.length}})</span></h2>
                    <label class="checkbox fr" :class="hideCurrentpair?'active':''" @click="hideCurrentpair=!hideCurrentpair">
                        {{$t('l.trade_34')}}
                    </label>
                </div>
                <dl class="entrustdl">
                    <dt>
                        <span>{{$t('l.trade_35')}}</span>
                        <span>{{$t('l.trade_5')}}</span>
                        <span>{{$t('l.trade_36')}}</span>
                        <span>{{$t('l.trade_37')}}</span>
                        <span>{{$t('l.trade_28')}}</span>
                        <span>{{$t('l.trade_38')}}</span>
                        <span>{{$t('l.trade_39')}}</span>
                        <span>{{$t('l.trade_40')}}</span>
                        <span>{{$t('l.trade_41')}}</span>
                    </dt>
                    <dd v-for="(item,index) in orders.userActiveOrders" :key="index"  v-show="hideCurrentpair && item.symbol==(quote.baseCurrencyName+quote.quoteCurrencyName) || !hideCurrentpair">
                        <span>{{item.createdTime}}</span>
                        <span>{{item.symbol}}</span>
                        <span class="type" :class="item.action === 'S'?'sell':'buy'">{{item.action === 'S' ?$t('l.trade_42') : $t('l.trade_43') }}</span>
                        <span>{{Number(item.price)}}</span>
                        <span>{{Number(item.size)}}</span>
                        <span>{{Number(Number(item.filledSize)/Number(item.size)*100)+'%'}}</span>
                        <span>{{Number(item.filledAmount)}}</span>
                        <span>{{item.orderType=='SL'?item.triggerPrice:item.price}}</span>
                        <span class="pro" @click="cancelOrderRequest(item.orderId,item.symbol)">{{$t('l.trade_44')}}</span>
                    </dd>
                </dl>
                <div class="nodata"  v-if="orders.userActiveOrders && orders.userActiveOrders.length==0" style="padding:20px 0;">
                    <img v-show="theme" src="../assets/images/nodata1.png">
                    <img v-show="!theme" src="../assets/images/nodata.png">
                    <p :style="theme?'color:#4B4978':'color:#33385E'">{{$t('l.personal_140')}}</p>
                </div>
            </div>
            <!--最近10条历史委托-->
            <div class="tradetable">
                <div class="tabletitle clearfix">
                    <h2 class="fl">{{$t('l.trade_45')}}</h2>
                    <router-link to="/historyMissionRecord" class="checkall">{{$t('l.trade_46')}}</router-link>
                    <label class="checkbox fr" :class="hideHistorypair?'active':''" @click="hideHistorypair=!hideHistorypair">
                        {{$t('l.trade_34')}}
                    </label>
                </div>
                <dl class="entrustdl">
                    <dt>
                        <span>{{$t('l.trade_35')}}</span>
                        <span>{{$t('l.trade_5')}}</span>
                        <span>{{$t('l.trade_36')}}</span>
                        <span>{{$t('l.trade_37')}}</span>
                        <span>{{$t('l.trade_18')}}</span>
                        <span>{{$t('l.trade_38')}}</span>
                        <span>{{$t('l.personal_153')}}</span>
                        <span>{{$t('l.trade_47')}}</span>
                        <span>{{$t('l.personal_154')}}</span>
                        <span>{{$t('l.personal_155')}}</span>
                        <span>{{$t('l.personal_156')}}</span>
                    </dt>
                    <dd v-for="(item,index) in orders.userHistoryOrders" :key="index" v-show="index<10 && hideHistorypair && item.symbol==(quote.baseCurrencyName+quote.quoteCurrencyName) || !hideHistorypair && index<10">
                        <span>{{item.createdTime}}</span>
                        <span>{{item.symbol}}</span>
                        <span class="type" :class="item.action === 'S'?'sell':'buy'">{{item.action === 'S' ?$t('l.personal_130') : $t('l.personal_129') }}</span>
                        <span>{{item.orderType=='M'?'---':Number(item.price).toFixed(currentPair.priceDisplayDp)}}</span>
                        <span>{{item.size?Number(item.size):'---'}}</span>
                        <span>{{item.orderType=='M' && item.action ==='B'?'---':Number(Number(item.filledSize)/Number(item.size)*100).toFixed(2)+'%'}}</span>
                        <span>{{Number(item.filledSize).toFixed(currentPair.sizeDisplayDp)}}</span>
                        <span>{{Number(item.lastFilledPrice).toFixed(currentPair.sizeDisplayDp)}}</span>
                        <span v-if="item.orderType=='M' && item.action ==='B'">{{item.filledAmount}}</span>
                        <span v-else-if="item.orderType=='M' && item.action ==='S'">---</span>
                        <span v-else>{{Number(item.filledAmount)}}</span>
                        <span v-if="item.triggerPrice">{{item.triggerPrice}}</span>
                        <span v-else>---</span>
                        <span class="yellow" v-if="item.orderStatus=='P'">{{$t('l.personal_161')}}</span>
                        <span class="yellow" v-else-if="item.orderStatus=='F'">{{$t('l.trade_49')}}</span>
                        <span class="yellow" v-else-if="item.orderStatus=='C'">{{$t('l.trade_50')}}</span>
                        <span class="yellow" v-else-if="item.orderStatus=='CP'">{{$t('l.trade_51')}}</span>
                        <span class="yellow" v-else-if="item.orderStatus=='E'">{{$t('l.trade_52')}}</span>
                        <span class="yellow" v-else-if="item.orderStatus=='EP'">{{$t('l.trade_52')}}</span>
                        <span class="yellow" v-else-if="item.orderStatus=='D'">{{$t('l.trade_53')}}</span>
                        <span class="yellow" v-else-if="item.orderStatus=='DP'">{{$t('l.trade_54')}}</span>
                        <span class="yellow" v-else>{{$t('l.trade_55')}}</span>
                    </dd>
                </dl>
                <div class="nodata"  v-if="orders.userHistoryOrders && orders.userHistoryOrders.length==0" style="padding:20px 0;">
                    <img v-show="theme" src="../assets/images/nodata1.png">
                    <img v-show="!theme" src="../assets/images/nodata.png">
                    <p :style="theme?'color:#4B4978':'color:#33385E'">{{$t('l.personal_140')}}</p>
                </div>
            </div>
            <Footer></Footer>
        </div>
        <!--杠杆弹窗-->
        <!--资金划转-->
        <div class="popWraper" v-show="false">
            <div class="popInter" style="width:500px;margin-left:-250px;">
                <div class="popHead">
                    <h2>资金划转</h2>
                    <i class="close"></i>
                </div>
                <div class="popbody" style="padding:30px 45px;">
                    <div class="popcon">
                        <div class="levergroup clearfix">
                            <h2>划转币种</h2>
                            <div class="levergroupcon">
                                <select class="coinselect">
                                    <option>BTC</option>
                                    <option>ETH</option>
                                    <option>BCH</option>
                                </select>
                            </div>
                        </div>
                        <div class="levergroup clearfix">
                            <h2>划转方向</h2>
                            <div class="levergroupcon clearfix">
                                <select class="accountselect fl">
                                    <option>资金账户</option>
                                    <option>杠杆账户</option>
                                    <option>合约账户</option>
                                </select>
                                <select class="accountselect fr">
                                    <option>资金账户</option>
                                    <option>杠杆账户</option>
                                    <option>合约账户</option>
                                </select>
                                <i class="convertbtn"></i>
                            </div>
                        </div>
                        <div class="levergroup clearfix">
                            <h2>划转数量</h2>
                            <div class="levergroupcon">
                                <input class="numput">
                                <span class="unitcoin">BTC</span>
                                <div class="totalintro clearfix">
                                    <span class="fl">可转数量 0.00000000</span>
                                    <a class="fr">全部划转</a>
                                </div>
                            </div>
                        </div>
                        <div class="leverbtnbox clearfix">
                            <a class="btn cancel fl">取消</a>
                            <a class="btn confirm fr">确定</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--还币-->
        <div class="popWraper" v-show="true">
            <div class="popInter" style="width:500px;margin-left:-250px;">
                <div class="popHead">
                    <h2>还币</h2>
                    <i class="close"></i>
                </div>
                <div class="popbody" style="padding:30px 45px;">
                    <div class="popcon">
                        <div class="levergroup clearfix">
                            <h2>还币币种</h2>
                            <div class="levergroupcon">
                                <select class="coinselect">
                                    <option>BTC</option>
                                    <option>ETH</option>
                                    <option>BCH</option>
                                </select>
                            </div>
                        </div>
                        <div class="levergroup clearfix">
                            <h2>还币信息</h2>
                            <div class="levergroupcon clearfix">
                                <div class="info clearfix">
                                    <a class="fl">利息</a>
                                    <a class="fr">0.00000000 BTC</a>
                                </div>
                                <div class="info clearfix">
                                    <a class="fl">已借</a>
                                    <a class="fr">0.00000000 BTC</a>
                                </div>
                                <div class="info clearfix">
                                    <a class="fl">应还</a>
                                    <a class="fr">0.00000000 BTC</a>
                                </div>
                            </div>
                        </div>
                        <div class="levergroup clearfix">
                            <h2>还币数量</h2>
                            <div class="levergroupcon">
                                <input class="numput">
                                <span class="unitcoin">BTC</span>
                                <div class="totalintro clearfix">
                                    <span class="fl">可还数量 0.00000000</span>
                                    <a class="fr">全部归还</a>
                                </div>
                            </div>
                        </div>
                        <div class="leverbtnbox clearfix">
                            <a class="btn cancel fl">取消</a>
                            <a class="btn confirm fr">确定</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--借币-->
        <div class="popWraper" v-show="true">
            <div class="popInter" style="width:500px;margin-left:-250px;">
                <div class="popHead">
                    <h2>借币</h2>
                    <i class="close"></i>
                </div>
                <div class="popbody" style="padding:30px 45px;">
                    <div class="popcon">
                        <div class="levergroup clearfix">
                            <h2>借入币种</h2>
                            <div class="levergroupcon">
                                <select class="coinselect">
                                    <option>BTC</option>
                                    <option>ETH</option>
                                    <option>BCH</option>
                                </select>
                            </div>
                        </div>
                        <div class="levergroup clearfix">
                            <h2>借币信息</h2>
                            <div class="levergroupcon clearfix">
                                <div class="info clearfix">
                                    <a class="fl">额度</a>
                                    <a class="fr">0.00000000 BTC</a>
                                </div>
                                <div class="info clearfix">
                                    <a class="fl">已借</a>
                                    <a class="fr">0.00000000 BTC</a>
                                </div>
                                <div class="info clearfix">
                                    <a class="fl">利率（日）</a>
                                    <div class="explan">
                                        <i></i>
                                        <div class="explanpop">
                                            借贷利率为每日0.098%，自借币成功时算起，以每小时为单位计息，不足1小时按1小时计算。归还借币时，偿还借贷本金及利息。
                                        </div>
                                    </div>
                                    <a class="fr">0.00000000 BTC</a>
                                </div>
                            </div>
                        </div>
                        <div class="levergroup clearfix">
                            <h2>借入数量</h2>
                            <div class="levergroupcon">
                                <input class="numput">
                                <span class="unitcoin">BTC</span>
                                <div class="totalintro clearfix">
                                    <span class="fl">可借数量 0.00000000</span>
                                    <a class="fr">全部借入</a>
                                </div>
                            </div>
                        </div>
                        <div class="leverbtnbox clearfix">
                            <a class="btn cancel fl">取消</a>
                            <a class="btn confirm fr">确定</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.levergroup{
    position:relative;
    h2{
        float:left;
        font-size:16px;
        color:#33385E;
        line-height:40px;
        padding-right:28px;
    }
    .levergroupcon{
        position:relative;
        float:right;
        width:318px;
        margin-bottom:20px;
        .info{
            padding-bottom:8px;
            a{
                font-size:14px;
                color:#8481BB;
                line-height:24px;
            }
            .explan{
                float:left;
                position:relative;
                i{
                    width:16px;
                    height:16px;
                    background:url(../assets/images/question-circle@2x.png) no-repeat center;
                    background-size:100% 100%;
                    display:block;
                    margin-top: 4px;
                }
                i:hover + .explanpop{
                    display:block;
                }
                .explanpop{
                    display:none;
                    position:absolute;
                    z-index:999;
                    left:-26px;
                    bottom:25px;
                    background:rgba(255,255,255,1);
                    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
                    width:249px;
                    height:124px;
                    box-sizing: border-box;
                    padding:12px 16px;
                    font-size:14px;
                    color:#33385E;
                    line-height:22px;
                    &:after{
                        content:"";
                        position:absolute;
                        bottom:-6px;
                        left:30px;
                        width:10px;
                        height:6px;
                        background:url(../assets/images/Triangle1@2x.png) no-repeat center;
                    }
                }
            }
        }
        select{
            height:40px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px solid rgba(221,224,235,1);
            text-indent:12px;
            outline:none;
            cursor: pointer;
            &.coinselect{
                width:100%;
            }
            &.accountselect{
                width:140px;
            }
        }
        .convertbtn{
            display: block;
            margin: 10px auto;
            overflow:hidden;
            width:16px;
            height:16px;
            background:url(../assets/images/convertico.png) no-repeat center;
            background-size:100% 100%;
        }
        .numput{
            width:318px;
            height:40px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px solid rgba(221,224,235,1);
            font-size:14px;
            color:#33385E;
            line-height:40px;
            text-indent:10px;
        }
        .unitcoin{
            position:absolute;
            right:14px;
            top:0;
            color:#33385E;
            font-size:14px;
            line-height:40px;
        }
        .totalintro{
            padding-top:10px;
            span{
                font-size:14px;
                color:#8481BB;
                line-height:20px;
            }
            a{
                font-size:14px;
                color:#7373F7;
                line-height:20px;
                cursor: pointer;
            }
        }
    }
}
.leverbtnbox{
    margin-top:25px;
    padding:0 22px;
    .btn{
        width:172px;
        height:40px;
        border-radius:4px;
        font-size:16px;
        line-height:40px;
        text-align:center;
        &.cancel{
            background:rgba(255,255,255,1);
            border:1px solid rgba(221,224,235,1);
            color:#33385E;
        }
        &.confirm{
            background:linear-gradient(90deg,rgba(171,171,252,1) 0%,rgba(115,115,247,1) 100%);
            color:#fff;
        }
    }
}
.header-chart-panel-sizer{background:#000 !important;}
.layout{
    position: relative;
    width:100%;	
    height:438px;
    top:30px;
}
.layout canvas{
	position:absolute;	
}
.layout #x{
	top:380px;
	left:0;	
}
.layout #y{
	top:0px;
	left:1600px;	
}
.night{
    .theme(#201D45,#141236,#8481BB);
}
.daytime{
    .theme(#EEEFF7,#FFFFFF,rgba(51,56,94,0.7));
}
.theme(@bg_color,@pn_color,@cl_color){
    &.comcont{
        background:@bg_color;
        position:relative;
        min-width:1345px;
        min-height: 100%;
        box-sizing: border-box;
        .nodata{
            background:#fff;
        }
        .contentTop{
            padding-top:8px;
            height:974px;
            overflow:hidden;
            width:100%;
            .left{
                overflow:hidden;
                .modHead{
                    height:70px;
                    background:@pn_color;
                    .symbolName{
                        float:left;
                        padding-top:18px;
                        padding-left:16px;
                        font-size:20px;
                        font-familyA:"Roboto-Regular";
                        font-weight:400;
                        color:@cl_color;
                        line-height:24px;
                        span{
                            opacity: 0.6;
                        }
                        a{
                            font-size:30px;
                            font-familyA:"Roboto-Medium";
                            font-weight:500; 
                            color: #33385E; 
                        }
                    }
                    .levernum{
                        float:left;
                        width:74px;
                        height:30px;
                        background:rgba(115,115,247,1);
                        border-radius:15px;
                        text-align:center;
                        line-height:30px;
                        color:#FFF;
                        font-size:14px;
                        margin-left:10px;
                        margin-top:20px;
                    }
                    .priceContainer{
                        float:left;
                        padding-top:14px;
                        padding-left:42px;
                        padding-right:24px;
                        width: 250px;
                        box-sizing: border-box;
                        .newprice{
                            font-size:12px;
                            line-height:17px;
                            color:@cl_color;
                            padding-bottom:3px;
                            display:block;
                        }
                        .estimate{
                            font-size:14px;
                            font-familyA:"Roboto-Medium";
                            font-weight:500;
                            color:rgba(13,168,139,1);
                            line-height:20px;
                            &.up{
                                color:rgba(13,168,139,1);
                            }
                            &.down{
                                color:#EF5756;
                            }
                            a{
                                font-size:14px;
                                font-familyA:"Roboto-Medium";
                                font-weight:500;
                                color:@cl_color;
                                line-height:20px;
                            }
                        }
                    }
                    .info24{
                        float:left;
                        padding:15px 25px;
                        position:relative;
                        &:after{
                            content:"";
                            position:absolute;
                            left:0;
                            width:1px;
                            height:32px;
                            background:#E9EEF4;
                            top:18px;
                        }
                        .title{
                            font-size:12px;
                            font-weight:400;
                            color:@cl_color;
                            line-height:17px;
                        }
                        .val{
                            font-size:14px;
                            font-familyA:"Roboto-Medium";
                            font-weight:500;
                            color:@cl_color;
                            line-height:20px;
                            padding-top:2px;
                            &.down{
                                color:#EF5756;
                            }
                            &.up{
                                color:#0DA88B;
                            }
                        }
                    }
                    .modetype{
                        float:right;
                        margin-top:20px;
                        margin-right:16px;
                        width:70px;
                        height:30px;
                        border-radius:6px;
                        border:1px solid rgba(233,238,244,1);
                        overflow:hidden;
                        background:url(../assets/images/daytime.png) no-repeat center;
                        &.active{
                            border:1px solid rgba(132,129,187,1);
                            background:url(../assets/images/night.png) no-repeat center;
                        }
                        span{
                            width:50%;
                            height:100%;
                            float:left;
                            cursor:pointer;
                        }
                    }
                }
            }
            .right{
                float:right;
                width:300px;
                background:@pn_color;
                margin-left:8px;
                height:100%;
                .coinpair{
                    padding:15px 16px 9px;
                    a{
                        float:left;
                        padding:3px;
                        text-align:center;
                        font-size:12px;
                        font-familyA:"Roboto-Regular";
                        font-weight:400;
                        color:@cl_color;
                        line-height:14px;
                        margin-left:18px;
                        border-radius:2px;
                        cursor:pointer;
                        &.active{
                            background:#7373F7;
                            color:#fff;
                        }
                    }
                }
                .actions{
                    padding:0 12px 16px;
                    .checkbox{
                        margin-left :10px;
                        margin-top:4px;
                        &:first-child{
                            margin-left:20px;
                        }
                    }
                }
                .transTitle{
                    padding:10px 16px;
                    border-top: 1px solid @bg_color;
                    border-bottom: 1px solid @bg_color;
                    font-size:14px;
                    font-familyA:"Roboto-Medium";
                    font-weight:500;
                    color:rgba(51,56,94,1);
                    line-height:16px;
                }
            }
        }
    }
    &.comcont.night{
        .nodata{background:none;}
        .nodata p{color:#fff;}
        .searchput{
            border: 1px solid rgba(132,129,187,0.2);
            i{
                background:url(../assets/images/searchNight.png) no-repeat center;
            }
        }
        .checkbox{
            color:rgba(132,129,187,0.7);
            &:after{
                content:"";
                border:1px solid rgba(132,129,187,0.3);
            }
        }
        .coin-switch-content dl dd span{
            color:#8481BB;
        }
        .contentTop .right .transTitle{
            color:#8481BB;
        }
        .coin-switch-content dl dt{
            border-bottom: 1px solid @bg_color;
            background:none;
        }
        .global-trades .list.bids, .transbar .list.bids{
            top: 54px;
        }
        .global-exchange .global-trades .tradesmode a{
            color:rgba(132,129,187,0.6);
            border:1px solid rgba(132,129,187,0.3);
        }
        .global-exchange .global-trades .tradesmode a.active{
            color:#fff;
        }
        .tradetable .tabletitle{
            background:#100E2E;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-head{
            background:#100E2E;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-head .mock-a.active{
            background:rgba(132,129,187,0.1);
            color:#7373F7;
            border-top:1px solid #7373F7;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body{
            background:#141236;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .paneltitle h2{
            color:#8481BB;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .price-box span{
            color:rgba(132,129,187,0.6);
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .price-box .stop-label{
            border:1px solid rgba(132,129,187,0.2);
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .price-box .stop-label.stop-slider{
            border:none;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel:first-child{
            border-right: 1px dashed #8481BB;
        }
       .el-slider__runway{
            background:#2A2850;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .price-box .stop-label.buysolide .el-slider__button{
            border: 2px solid #fff;
            background:#0DA88B;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .price-box .stop-label.buysolide .el-slider__stop{
            border: 2px solid rgba(20,18,54,1);
            background:rgba(42,40,80,1);
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .price-box .stop-label.sellsolide .el-slider__button{
            border: 2px solid #fff;
            background:#EF5756;
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .price-box .stop-label.sellsolide .el-slider__stop{
            border: 2px solid rgba(20,18,54,1);
            background:rgba(42,40,80,1);
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .global-btn{
            border: 1px solid rgba(132, 129, 187, 0.2)
        }
        .global-exchange .chartbox .tradebox .trade-panel .mod-body .single-panel .price-box .stop-label > input.disabled{
            &::-webkit-input-placeholder{
                color:rgba(132,129,187,0.5);
            }
            background:#211F47;
        }
        .contentTop .left .modHead .info24:after{
            content:"";
            background: rgba(132,129,187,0.1);
        }
        .global-exchange .chartbox .depthchartbar{
            background:#141236;
        }
        .global-exchange .chartbox .changechart span{
            color:#fff;
        }
    }
    .transbar{
        position:relative;
    }
    .global-trades .list,.transbar .list{
        position: absolute;
        width: 100%;
        left: 0;
        overflow: hidden;
        background:@pn_color;
        &.asks{
            bottom:54px;
            .fillPrice{
                background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(239,87,86,.1)),to(rgba(239,87,86,.1)));
                background-image: -o-linear-gradient(rgba(239,87,86,.1),rgba(239,87,86,.1));
                background-image: linear-gradient(rgba(239,87,86,.1),rgba(239,87,86,.1));
                span:first-child{
                    color:#EF5756;
                }
            }
        }
        &.bids{
            top:56px;
            .fillPrice{
                background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(13,168,139,.1)),to(rgba(13,168,139,.1)));
                background-image: -o-linear-gradient(rgba(13,168,139,.1),rgba(13,168,139,.1));
                background-image: linear-gradient(rgba(13,168,139,.1),rgba(13,168,139,.1));
                span:first-child{
                    color:#0DA88B;
                }
                
            }
        }
        .fillPrice{
            display:flex;
            flex-shrink: 0;
            cursor: pointer;
            background-repeat: no-repeat;
            background-size:0 100%;
            padding:0 16px;
            height:23.5px;
            line-height:24px;
            background-position:100%;
            span{
                flex: 1;
                text-align: right;
                white-space: nowrap;
                font-size:12px;
                font-familyA:"Roboto-Regular";
                font-weight:400;
                color:@cl_color;
                line-height:24px;
                &:first-child{
                    text-align:left;
                }
                &:last-child{
                    flex:1.1;
                }
                &.green{color:#0DA88B;}
                &.red{color:#EF5756;}
            }
        }
    }
    .global-exchange{
        margin-top:8px;
        .global-trades{
            float:left;
            background:@pn_color;
            min-width: 300px;
            margin-right: 8px;
            .tradesmode{
                padding:16px 16px 12px;
                a{
                    float:left;
                    margin-right:10px;
                    width:40px;
                    padding:4px 0;
                    border-radius:2px;
                    border:1px solid rgba(233,238,244,1);
                    box-sizing: border-box;
                    line-height:100%;
                    text-align:center;
                    font-size:12px;
                    cursor:pointer;
                    &.active{
                        background:#7373F7;
                        color:#fff;
                    }
                }
            }
            .mod-body{
                height:848px;
                overflow:hidden;
                dl{
                    position:relative;
                    height:100%;
                    font-size:12px;
                    dt{
                        display:flex;
                        padding:0 16px 4px;
                        border-bottom:1px solid @bg_color;
                        position: relative;
                        z-index: 1;
                        background: @pn_color;
                        span{
                            text-align:right;
                            flex: 1;
                            white-space: nowrap;
                            color: @cl_color;
                            font-familyA:"Roboto-Regular";
                            line-height:14px;
                            font-size:12px;
                            opacity: 0.4;
                            &.price{
                                text-align:left;
                            }
                            &.total{
                                flex:1.1;
                            }
                        }
                    }
                    .now-pric{
                        height:54px;
                        border-top:1px solid #F7F8FC;
                        border-bottom:1px solid #F7F8FC;
                        position: absolute;
                        top: calc(50% - 4px);
                        left: 0;
                        width: 100%;
                        &.buy{
                            top:17px;
                        }
                        &.sell{
                            top:calc(100% - 56px);
                        }
                        .ticker-close{
                            position: absolute;
                            width: 100%;
                            left: 0;
                            display: flex;
                            height:54px;
                            border-top:1px solid @bg_color;
                            border-bottom:1px solid @bg_color;
                            p{
                                font-size:16px;
                                font-familyA:"Roboto-Medium";
                                font-weight:500;
                                color:rgba(13,168,139,1);
                                line-height:54px;
                                text-align:center;
                                width:100%;
                                span{
                                    font-size:14px;
                                    font-familyA:"Roboto-Medium";
                                    font-weight:500;
                                    color:@cl_color;
                                    line-height:16px;
                                }
                                &.up{
                                   color:rgba(13,168,139,1); 
                                }
                                &.down{
                                   color:#EF5756; 
                                }
                            }
                        }
                        
                    }
                }
            }
        }
        .chartbox{
            overflow:hidden;
            position:relative;
            .changechart{
                position:absolute;
                right:0;
                top:0;
                z-index:9;
                span{
                    color:rgba(51,56,94,0.7);
                    line-height:40px;
                    padding: 0 6px;
                    cursor:pointer;
                }
            }
            .depthchartbar{
                height:438px;
                background: #fff;
            }
            .leverbox{
                padding:10px 18px;
                background:#fff;
                margin-top:8px;
                overflow:hidden;
                .leverinfo{
                    float:left;
                    width:22%;
                    h2{
                        font-size:14px;
                        color:#33385E;
                        line-height:16px;
                        font-weight:600;
                        padding-bottom:3px;
                    }
                    p{
                        font-size:12px;
                        color:#33385E;
                        line-height:24px;
                    }
                }
                .leverbtnbox{
                    float:left;
                    .leverbtn{
                        display:block;
                        width:106px;
                        height:28px;
                        background:rgba(255,255,255,1);
                        border-radius:6px;
                        border:1px solid rgba(115,115,247,1);
                        text-align:center;
                        line-height:28px;
                        color:#7373F7;
                        font-size:12px;
                        &.small{
                            width:50px;
                            margin-top:6px;
                        }
                    }
                }
            }
            .tradebox{
                margin-top:8px;
                .trade-panel{
                    .mod-head{
                        width:100%;
                        height:32px;
                        background:rgba(247,248,252,1);
                        padding:0 16px;
                        box-sizing: border-box;
                        
                        .mock-a{
                            float:left;
                            padding:0 21px;
                            line-height:32px;
                            font-size:14px;
                            font-weight:400;
                            color:@cl_color;
                            line-height:32px;
                            cursor: pointer;
                            &.active{
                                background:#fff;
                                color:#7373F7;
                                border-top:1px solid #7373F7;
                            }
                            i{
                                display:inline-block;
                                vertical-align: middle;
                                margin-left:5px;
                                width:14px;
                                height:14px;
                                background:url(../assets/images/doubt.png) no-repeat center;
                                position:relative;
                                &:hover{
                                    .tips{display:block;}
                                }
                                .tips{
                                    display:none;
                                    position:absolute;
                                    background:#fff;
                                    padding:12px 16px;
                                    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
                                    border-radius:3px;
                                    font-size:14px;
                                    color:rgba(51,56,94,1);
                                    line-height:22px;
                                    width:184px;
                                    left: -15px;
                                    bottom:  calc(100% - -10px);
                                    &:after{
                                        content:"";
                                        position:absolute;
                                        bottom:-6px;
                                        left:16px;
                                        width:10px;
                                        height:6px;
                                        background:url(../assets/images/Triangle1@2x.png) no-repeat center;
                                    }
                                }
                            }
                        }
                    }
                    .mod-body{
                        padding:20px 16px;
                        height:340px;
                        background:#fff;
                        box-sizing: border-box;
                        .single-panel{
                            width:50%;
                            box-sizing: border-box;
                            padding-left:34px;
                            &:first-child{
                                border-right:1px dashed #E9EEF4;
                                padding-left:0;
                                padding-right:34px;
                            }
                            .paneltitle{
                                padding-bottom:14px;
                                h2{
                                    font-size:16px;
                                    font-familyA:"PingFangSC-Medium";
                                    font-weight:500;
                                    color:rgba(51,56,94,1);
                                    line-height:22px;
                                }
                                span{
                                    font-size:12px;
                                    font-weight:400;
                                    color:rgba(132,129,187,1);
                                    line-height:17px;
                                }
                            }
                            .price-box{
                                margin-bottom:8px;
                                display: flex;
                                position:relative;
                                .convert_cny{
                                    position:absolute;
                                    font-size:12px;
                                    color:#8481BB;
                                    top:30px;
                                    line-height:24px;
                                    left:52px;
                                    font-familyA: Roboto;
                                }
                                &:first-child{
                                    margin-bottom:24px;
                                }
                                span{
                                    width:50px;
                                    font-size:12px;
                                    font-weight:400;
                                    color:rgba(51,56,94,0.5);
                                    line-height:32px;
                                }
                                .stop-label{
                                    flex: auto;
                                    width: auto;
                                    display: inline-block;
                                    height: 30px;
                                    line-height: 30px;
                                    border-radius:4px;
                                    border:1px solid rgba(233,238,244,1);
                                    position:relative;
                                    &.stop-slider{padding:0;border:none;}
                                    &>input{
                                        width: 100%;
                                        font-size:14px;
                                        font-familyA:Roboto-Medium;
                                        font-weight:500;
                                        color:@cl_color;
                                        line-height:30px;
                                        text-indent: 12px;
                                        box-shadow: none;
                                        &.disabled{
                                            background:rgba(240,242,253,1);
                                            color:rgba(51,56,94,0.6);
                                            font-size: 12px;
                                            font-weight:400;
                                            vertical-align: top;
                                            &::-webkit-input-placeholder{
                                                color:rgba(51,56,94,0.4);
                                            }
                                        }
                                    }
                                    .currency{
                                        position:absolute;
                                        right:0;
                                        top:0;
                                        font-size:12px;
                                        font-familyA:"Roboto-Regular";
                                        font-weight:400;
                                        color:rgba(51,56,94,0.5);
                                        line-height:30px;
                                        padding-right:13px;
                                        z-index:9;
                                        width:auto;
                                        text-transform: uppercase;
                                    }
                                    &.buysolide{
                                        .el-slider__bar{background:#0DA88B;}
                                        .el-slider__button{border: 2px solid #0DA88B;height:16px;width: 16px;box-sizing: border-box;margin-top: 3px;}
                                        .el-slider__stop{height: 10px;width: 10px;border: 2px solid #fff;background-color: #DDE0EB;top: -2px; box-sizing: border-box;}
                                        .el-slider__button-wrapper{top: -17px;}
                                    }
                                    &.sellsolide{
                                        .el-slider__bar{background:#EF5756;}
                                        .el-slider__button{border: 2px solid #EF5756;height:16px;width: 16px;box-sizing: border-box;margin-top: 3px;}
                                        .el-slider__stop{height: 10px;width: 10px;border: 2px solid #fff;background-color: #DDE0EB;top: -2px; box-sizing: border-box;}
                                        .el-slider__button-wrapper{top: -17px;}
                                    }
                                    .el-slider{width:89%;float:left;}
                                    .slideval{float:right;color:#8481BB;font-familyA:"Roboto-Regular";padding-top:8px;text-align:right;width:auto;}
                                }
                            }
                            .submit{
                                width:100%;
                                height:34px;
                                background:rgba(13,168,139,1);
                                border-radius:3px;
                                font-size:16px;
                                color:#fff;
                                line-height:34px;
                                text-align:center;
                                cursor: pointer;
                                &.bg-buy{
                                    background:rgba(13,168,139,1);
                                }
                                &.bg-sell{
                                    background:#EF5756;
                                }
                            }
                            .global-btn{
                                width:100%;
                                height:34px;
                                border-radius:4px;
                                border:1px solid rgba(233,238,244,1);
                                line-height: 34px;
                                text-align:center;
                                color:@cl_color;
                                box-sizing: border-box;
                                a{
                                    color:#7373F7;
                                    padding:0 3px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .coin-switch-content{
        flex: auto;
        position: relative;
        height: 400px;
        overflow: hidden;
        dl{
            width:100%;
            .currency{
                text-align:left;
                text-indent:20px;
            }
            dt{
                padding:0 16px;
                height:21px;
                border-bottom:1px solid #F7F8FC;
                width:100%;
                display:flex;
                box-sizing: border-box;
                position: relative;
                background: #fff;
                z-index: 9;
                span{
                    flex: 1;
                    cursor: pointer;
                    text-align:right;
                    font-size:12px;
                    font-familyA:"Roboto-Regular";
                    font-weight:400;
                    color:@cl_color;
                    line-height:14px;
                    i{
                        margin-left: 2px;
                        display: inline-block;
                        vertical-align: middle;
                        width: 8px;
                        height: 10px;
                        background-repeat: no-repeat;
                        background-image: url(https://file.huobiasia.vip/global/zh-cn/static/img/bb99512.svg);
                    }
                }
            }
            dd{
                padding: 0;
                margin-left: 0;
                position: relative;
                padding:0 16px;
                cursor: pointer;
                line-height:28px;
                i{
                    position: absolute;
                    cursor: pointer;
                    width: 12px;
                    height: 12px;
                    top: 8px;
                    background: url(../assets/images/start.png) no-repeat center;
                    background-size:12px 12px;
                    &.active{
                        background-image: url(../assets/images/level.png);
                        background-size:12px 12px;
                    }
                }
                .flex{
                    display:flex;
                    width:100%;
                    position: relative;
                }
                span{
                    flex: 1;
                    font-size:12px;
                    font-familyA:"Roboto-Regular";
                    font-weight:400;
                    color:rgba(51,56,94,1);
                    line-height:28px;
                    text-align:right;
                    &.rate.up{
                        color:#0DA88B;
                    }
                    &.rate.down{
                        color:#EF5756;
                    }
                }
            }
        }
    }
    .tradetable{
        padding-top:8px;
        .tabletitle{
            height:36px;
            background:rgba(247,248,252,1);
            padding:0 16px;
            .checkall{
                float:right;
                font-size:12px;
                font-weight:400;
                color:rgba(115,115,247,1);
                line-height:36px;
                margin-left :25px;
                cursor:pointer;
            }
            .checkbox{
                margin-top:8px;
            }
            h2{
                font-size:14px;
                font-familyA:"PingFangSC-Medium";
                font-weight:500;
                color:@cl_color;
                line-height:36px;
            }
        }
        .entrustdl{
            background:@pn_color;
            dt{
                border-bottom:1px solid @bg_color;
                display:flex;
                line-height:31px;
                span{
                    flex:1;
                    font-size:12px;
                    font-weight:400;
                    color:@cl_color;
                    line-height:31px;
                    &:first-child{
                        text-indent:16px;
                    }
                }
            }
            dd{
                height:32px;
                display:flex;
                span{
                    font-size:12px;
                    font-familyA:"Roboto-Regular";
                    font-weight:400;
                    color:@cl_color;
                    opacity: 0.7;
                    line-height:32px;
                    flex:1;
                    &.type.buy{
                        color:#0DA88B;
                    }
                    &.type.sell{
                        color:#EF5756;
                    }
                    &.pro{
                        color:#7373F7;
                        cursor: pointer;
                    }
                    &:first-child{
                        text-indent:16px;
                    }
                    &.yellow{
                        color:#F78900;
                    }
                    &.green{
                        color:#0DA88B;
                    }
                    &.gray{
                        color:rgba(51,56,94,0.4);
                    }
                }
            }
        }
    }
}

</style>
<script>
import PersonalHeader from "../components/personalHeader";
import Footer from "../components/footer";
import {api} from '../api/api';
import Tradingview from "../components/tradingview";
// import wsmsg from "../../static/messages"
import trade from "../assets/js/trade"
import moment from 'moment'
import merge from 'webpack-merge'
import BScroll from 'better-scroll'
import {compute} from '@/assets/js/compute';
import utils from '../assets/js/utils'
import event from "../assets/js/event";
import { setTimeout } from 'timers';
// import { clearInterval } from 'timers';


export default {
    components: {
        PersonalHeader,
        Footer,
        Tradingview
    },
    inject:['reload'],
    watch:{
            'screenWidth':function(val){ //监听屏幕宽度变化
                var layoutwid = document.getElementById('layout').width;
                this.canvas.width = layoutwid;
            }
    },        
    data() {
        return {
            global_lang:'zh_CN',//当前语种
            depthData:{
                
            },
            charttype:0,//0tv1cv
            canvas:"",
            context:"",
           theme:false,//皮肤
           pricmode:0,//挂单查看模式
           quoteCurrencyName:'USDT',//当前基础货币
           supportTradeRange:['USDT','BTC','ETH','HKDT'],//基础货币组
           likecoin:"",//模糊搜索交易对
           symbols:[],
           interval:"",
           checktype:1,//1涨跌,2交易量
           hideCurrentpair:false,//当前委托是否隐藏其他交易对
           hideHistorypair:false,//历史委托是否隐藏其他交易对
           DEFAULT_COIN:"BTCUSDT",//当前交易对
           currentPair:{},//当前交易对信息
           sellSeries:[],//卖单
           buySeries:[],//买单
           tradeRecord:[],//成交记录
           orders:{},//订单
           quote:"",//当前行情数据
           kLinebars:[],//K线数据
           newbar:{},//最新一条数据
           tradetype:1,//交易方式
           buypercentage:0,//买单拖动数值
           sellpercentage:0,//卖单拖动数值
           usertoken:"",//用户token
           accountInfo:{//当前账户余额
                base_available:0,
                quote_available:0,
            },
            limit_buy_price:0,//限价买入价格
            limit_sell_price:0,//限价卖出价格
            buytrigger:"",//买入触发价
            selltrigger:"",//卖出触发价
            limit_buy_size:0,//限价买入数量
            limit_sell_size:0,//限价卖出数量
            limit_buy_amount:"",//限价买入成交额
            limit_sell_amount:"",//限价卖入成交额
            // limit_buy_reality_vol:"",//买入预计到账
            // limit_sell_reality_vol:"",//卖出预计到账
            convert_buy_cny:0,//买入价格换算
            convert_sell_cny:0,//卖出价格换算
            buytrigger_cny:0,
            selltrigger_cny:0,
            buyFillColor: {
                type: String,
                default: '#09C989'
            },
            sellFillColor: {
                type: String,
                default: '#F24E4D'
            },
            tipsPrice: {
                type: String,
                default: this.$t("l.trade_56")
            },
            tipsTotal: {
                type: String,
                default: this.$t("l.trade_57")
            },
            valueMap:new Map()
        }
    },
    created(){
        this.DEFAULT_COIN = this.$route.query.symbol?this.$route.query.symbol:"BTCUSDT"
        this.win$.wsmsg.getWsConnection();
        this.baseinfo();
        this.global_lang = this.$i18n.locale;
    },
    methods:{
        // //基本信息
        async baseinfo(){
            let that = this;
            let res = await api.baseinfo()
            if(res.data.code==0){
                this.usertoken = this.$store.state.usertoken;
                if(this.usertoken){ 
                    this.checkLogin(this.usertoken,true,true,true,false); 
                }
            }
        },
        click_ask(item){
            let that = this;
            that.limit_buy_price = item.price;
            that.limit_buy_size = item.size;
            that.on_input_ask_vol(0) ; 
        },
        click_bid(item){
            let that = this;
            that.limit_sell_price = item.price;
            that.limit_sell_size = item.size;
            that.on_input_bid_vol(1);
        },
        getUrlParam(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r!=null) return unescape(r[2]); return null;
        },
        changeSymbols(symbols){
            let that = this;
            this.$router.push({
                query:merge(this.$route.query,{'symbol':symbols})
            })
            this.reload();
        },
        changeTradeType(i){
            let that = this;
            if(that.quote.baseCurrencyName=='CKT') return;
            that.tradetype = i;
            that.limit_buy_price = "";
            that.limit_sell_price = "";
            that.limit_buy_size = "";
            that.limit_sell_size = "";
            that.limit_sell_amount = "";
            that.limit_buy_amount = "";
        },
        changebuytrigger_cny(){
            let that = this;
            if(that.currentPair.close!=0){
                if(that.global_lang=='EN'){
                    var rate =    Number(that.currentPair.closeUsd)  / Number(that.currentPair.close) ;
                    that.buytrigger_cny  = Number((rate*Number(that.buytrigger)).toFixed(that.currentPair.priceDisplayDp)).toFixed(2);
                }else{
                    var rate =    Number(that.currentPair.closeCny)  / Number(that.currentPair.close) ;
                    that.buytrigger_cny  = Number((rate*Number(that.buytrigger)).toFixed(that.currentPair.priceDisplayDp)).toFixed(2);
                }
            }
        },
        changeselltrigger_cny(){
            let that = this;
            if(that.currentPair.close!=0){
                if(that.global_lang =='EN'){
                    var rate =    Number(that.currentPair.closeUsd)  / Number(that.currentPair.close)   ;
                    that.selltrigger_cny  = Number(rate*Number(that.selltrigger).toFixed(that.currentPair.priceDisplayDp)).toFixed(2) ; 
                }else{
                    var rate =    Number(that.currentPair.closeCny)  / Number(that.currentPair.close)   ;
                    that.selltrigger_cny  = Number(rate*Number(that.selltrigger).toFixed(that.currentPair.priceDisplayDp)).toFixed(2) ; 
                }
            }
        },
        //输入买价换算人民币/美元
        on_input_ask_rate(type){
            let that = this;
            if(that.currentPair.close!=0){
                if(that.global_lang=='EN'){
                    var rate =    Number(that.currentPair.closeUsd)  / Number(that.currentPair.close) ;
                    that.convert_buy_cny  = Number((rate*Number(that.limit_buy_price)).toFixed(that.currentPair.priceDisplayDp)).toFixed(4);
                }else{
                    var rate =    Number(that.currentPair.closeCny)  / Number(that.currentPair.close) ;
                    that.convert_buy_cny  = Number((rate*Number(that.limit_buy_price)).toFixed(that.currentPair.priceDisplayDp)).toFixed(4);
                }
            }
            if(that.limit_buy_size){
                that.on_input_ask_vol(type) ; 
            }
        },
        //计算限价买入总额
        on_input_ask_vol(type){
            let that = this;
            if(that.tradetype==2 && type==0){
                that.limit_buy_price =  that.currentPair.close;      
            }else if(that.tradetype==2 && type==1){
                that.limit_sell_price =  that.currentPair.close;      
            }
            that.limit_buy_amount = compute.accMul(that.limit_buy_price,that.limit_buy_size).toFixed(that.currentPair.priceDisplayDp);
            that.limit_buy_reality_vol = compute.dcmReduce(Number(that.limit_buy_size),compute.accMul(Number(that.limit_buy_size),Number(that.currentPair.takerCommission)));
        },
        //计算限价卖出总额
        on_input_bid_vol(type){
            let that = this;
            if(that.tradetype==2 && type==0){
                that.limit_buy_price =  that.currentPair.close;      
            }else if(that.tradetype==2 && type==1){
                that.limit_sell_price =  that.currentPair.close;      
            }
            if(that.currentPair.close!=0)
            if(that.global_lang =='EN'){
                var rate =    compute.accDiv(Number(that.currentPair.closeUsd),Number(that.currentPair.close))   ;
                that.convert_sell_cny  = compute.accMul(rate,Number(that.limit_sell_price)).toFixed(4) ; 
            }else{
                var rate =    compute.accDiv(Number(that.currentPair.closeCny),Number(that.currentPair.close))   ;
                that.convert_sell_cny  = compute.accMul(rate,Number(that.limit_sell_price)).toFixed(4) ; 
            }
            that.limit_sell_amount = compute.accMul(that.limit_sell_price,that.limit_sell_size).toFixed(that.currentPair.priceDisplayDp);
            that.limit_sell_reality_vol = compute.dcmReduce(Number(that.limit_sell_size),compute.accMul(Number(that.limit_sell_size),Number(that.currentPair.takerCommission)));
        },
        //买入比例
        changebuyrage(){
            let that = this;
            if(that.tradetype==1 || that.tradetype==3){
                let val = compute.accDiv(compute.accDiv(compute.accMul(that.accountInfo.quote_available,that.buypercentage),100),that.limit_buy_price);
                if( !that.limit_buy_price || Number(that.limit_buy_price) == 0 ) val = 0  ; 
                that.limit_buy_size = val.toFixed(that.currentPair.sizeDisplayDp);
                that.on_input_ask_vol();
            }else if(that.tradetype==2){
                let price = that.currentPair.closePrice ; 
                let val = compute.accDiv(compute.accMul(that.accountInfo.quote_available,that.buypercentage),price)
                if( !that.limit_buy_price || Number(that.limit_buy_price) == 0 ) val = 0  ; 
                that.limit_buy_size = val.toFixed(that.currentPair.sizeDisplayDp);
                that.on_input_ask_vol();
            }
        },
        //卖出比例
        changesellrage(){
            let that = this;
            let val = compute.accDiv(compute.accMul(that.accountInfo.base_available,that.sellpercentage),100);
            that.limit_sell_size = val.toFixed(that.currentPair.sizeDisplayDp);
            that.on_input_bid_vol(1);
        },
        //通过总额计算买入数量
        on_input_limit_ask_amount(){
            let that = this;
            if(that.limit_buy_amount==0) reutrn;
            if(that.tradetype==2){
                that.limit_buy_price = that.currentPair.close;
            }
            that.limit_buy_size = compute.accDiv(Number(that.limit_buy_amount),Number(that.limit_buy_price)).toFixed(that.currentPair.sizeDisplayDp);
        },
        //通过总额计算卖出数量
        on_input_limit_bid_amount(){
            let that = this;
            if(that.limit_sell_amount==0) return;
            if(that.tradetype==2){
                that.limit_sell_price = that.currentPair.close;
            }
            that.limit_sell_size = compute.accDiv(Number(that.limit_sell_amount),Number(that.limit_sell_price)).toFixed(that.currentPair.sizeDisplayDp);
        },
        //增加或者删除自选
        watchListEditRequest(symbol,isAdd){
            let that = this;
            //that.loadWin(3000);
            var symbols  = [symbol] ; 
            that.win$.wsmsg.sendWsMsg({watchEdit : wsmsg.WatchListEditRequest.create(that.win$.wsmsg.addRequestId({
                add : isAdd,  
                symbols: symbols,  
                watch : true 
            }))});
        },
        // 下单
		placeOrderRequest(action){
            let that = this;
			if(!that.usertoken) { 
				that.$layer.msg(that.$t("l.home_20"));  
				return false ; 
			} 
			
			if(!that.limit_buy_price &&  that.tradetype==1 && action=='B') {
				that.hideMsgWin(that.$t("l.trade_58") , "" , 3000 ,6 );  
				return false; 
            }
            if(!that.limit_sell_price &&  that.tradetype==1 && action=='S') {
				that.hideMsgWin(that.$t("l.trade_58") , "" , 3000 ,6 );  
				return false; 
			}
			if(action=='B' && !that.limit_buy_size) {
				that.hideMsgWin(that.$t("l.trade_59") , "" , 3000 ,6 );  
				return false; 
            }
            if(action=='S' && !that.limit_sell_size) {
				that.hideMsgWin(that.$t("l.trade_59") , "" , 3000 ,6 );  
				return false; 
			}
		  
			if(action=='B' && that.currentPair.maxSize <  Number(that.limit_buy_size) && that.currentPair.maxSize > 0 ){
				that.hideMsgWin(that.$t("l.trade_60")+that.currentPair.maxSize , "" , 3000 ,6 );   
				return  false; 
            }
            if(action=='S' && that.currentPair.maxSize <  Number(that.limit_sell_size) && that.currentPair.maxSize > 0 ){
				that.hideMsgWin(that.$t("l.trade_60")+that.currentPair.maxSize , "" , 3000 ,6 );   
				return  false; 
			}
			
			if(action=='B' && that.currentPair.minSize >   Number(that.limit_buy_size) && that.currentPair.minSize > 0){
				that.hideMsgWin(that.$t("l.trade_61")+that.currentPair.minSize , "" , 3000 ,6 );   
				return  false; 
            }
            if(action=='S' && that.currentPair.minSize >   Number(that.limit_sell_size) && that.currentPair.minSize > 0){
				that.hideMsgWin(that.$t("l.trade_61")+that.currentPair.minSize , "" , 3000 ,6 );   
				return  false; 
			}
			 
			if(action=='B' && that.currentPair.maxPrice < Number(that.limit_buy_price) && that.currentPair.maxPrice > 0 ){
				that.hideMsgWin(that.$t("l.trade_62")+that.currentPair.minPrice , "" , 3000 ,6 );   
				return  false; 
            } 
            if(action=='S' && that.currentPair.maxPrice < Number(that.limit_sell_price) && that.currentPair.maxPrice > 0 ){
				that.hideMsgWin(that.$t("l.trade_62")+that.currentPair.minPrice , "" , 3000 ,6 );   
				return  false; 
			} 
			
			if(action=='B' && that.currentPair.minPrice >   Number(that.limit_buy_price) ){
				that.hideMsgWin(that.$t("l.trade_63")+that.currentPair.minPrice , "" , 3000 ,6 );   
				return  false; 
            } 
            if(action=='S' && that.currentPair.minPrice >   Number(that.limit_sell_price) ){
				that.hideMsgWin(that.$t("l.trade_63")+that.currentPair.minPrice , "" , 3000 ,6 );   
				return  false; 
			} 
            //发起请求时清除已设置的量 防止重复提交
            let size = action=='B'?that.limit_buy_size:that.limit_sell_size;
            that.limit_buy_size = "";
            that.limit_sell_size = "";
            that.loadWin(3000);
            let orderType = "L";
            if(that.tradetype==1){
                orderType = "L"
            }else if(that.tradetype==2){
                orderType = "M"
            }else if(that.tradetype==3){
                orderType = "SL"
            }
			that.win$.wsmsg.sendWsMsg({placeOrder: wsmsg.PlaceOrderRequest.create(that.win$.wsmsg.addRequestId({ 
				symbol : that.DEFAULT_COIN,
				action: action ,
				orderType : orderType ,
				price : action=='B'?that.limit_buy_price.toString(): that.limit_sell_price.toString(),
                size : size.toString() ,
                triggerPrice:action=='B'?that.buytrigger.toString(): that.selltrigger.toString(),
                amount:action=='B'?that.limit_buy_amount.toString():that.limit_sell_amount.toString()
			}))});
			return false ; 
        },
        /**
         * 撤单
         * @param orderId
         * @returns
         */
        cancelOrderRequest(orderId,symbol){
            let that = this;
            that.loadWin(3000);
            that.win$.wsmsg.sendWsMsg({cancelOrder : wsmsg.CancelOrderRequest.create(that.win$.wsmsg.addRequestId({
                symbol: symbol, 
                orderId: orderId
            }))});
        },
        //登出
        async loginout(){
            let that = this;
            let res = await api.logout()
            if(res.data.code==0){
                localStorage.removeItem("usertoken");
                localStorage.removeItem("userintro");
                that.$store.commit('resetstate');
                that.$router.push({
                    path: "/login"
                });
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //弹出
        hideMsgWin(msg , id , timeOut ,anim ){
            var index  = this.$layer.msg(msg, { 
                            shadeClose : true,
                            id : id, 
                            shade: [0.8, '#000'],
                            anim : anim ,
                            time :timeOut
                            } );
        },
        //发送websocket请求
        initPageData(){
            let that = this;
            // 获取主数据,先获取组数据组装symbols
            that.win$.wsmsg.sendWsMsg({masterData : wsmsg.MasterDataRequest.create(that.win$.wsmsg.addRequestId({
            }))});
            // 当前交易对的行情
            that.win$.wsmsg.sendWsMsg({quote : wsmsg.QuoteRequest.create(that.win$.wsmsg.addRequestId({
                symbol: that.DEFAULT_COIN, 
                watch: true
            }))});
            
            
            // 获取自选
            that.win$.wsmsg.sendWsMsg({watchList : wsmsg.WatchListRequest.create(that.win$.wsmsg.addRequestId({
                watch: true
            }))});
            
            // 挂单深度
            that.win$.wsmsg.sendWsMsg({depth : wsmsg.DepthRequest.create(that.win$.wsmsg.addRequestId({
                symbol: that.DEFAULT_COIN,
                limit : 30 , 
                watch: true
            }))});	
            
            // 成交记录
            that.win$.wsmsg.sendWsMsg({trade  : wsmsg.TradeRequest.create(that.win$.wsmsg.addRequestId({
                symbol: that.DEFAULT_COIN,
                limit : 100 , 
                watch: true
            }))});
            
            this.pollingSymbols() ; 
        },
        //resetWsData
        resetWsData(){
            let that = this;
            if(this.usertoken){ 
                this.checkLogin(this.usertoken,true,true,true,false); 
            }
            // 获取主数据,先获取组数据组装symbols
            that.win$.wsmsg.sendWsMsg({masterData : wsmsg.MasterDataRequest.create(that.win$.wsmsg.addRequestId({
            }))});
             // 当前交易对的行情
            that.win$.wsmsg.sendWsMsg({quote : wsmsg.QuoteRequest.create(that.win$.wsmsg.addRequestId({
                symbol: that.DEFAULT_COIN, 
                watch: true
            }))});
            // 成交记录
            that.win$.wsmsg.sendWsMsg({trade  : wsmsg.TradeRequest.create(that.win$.wsmsg.addRequestId({
                symbol: that.DEFAULT_COIN,
                limit : 100 , 
                watch: true
            }))});
            that.win$.wsmsg.sendWsMsg({bar : wsmsg.BarRequest.create(that.win$.wsmsg.addRequestId({
                symbol: that.DEFAULT_COIN,
                type  : that.$store.state.resolution, 
                number: 10 , 
                watch : true,
                noFill: false
            }))});
        },
        // 获取自选
        watchListRequest(){
            let that = this;
            that.win$.wsmsg.sendWsMsg({watchList : wsmsg.WatchListRequest.create(that.win$.wsmsg.addRequestId({  
                watch: false
            }))});
            // 挂单深度
            that.win$.wsmsg.sendWsMsg({depth : wsmsg.DepthRequest.create(that.win$.wsmsg.addRequestId({
                symbol: that.DEFAULT_COIN,
                limit : 30 , 
                watch: true
            }))});
        },
        checkLogin(token,includeUser,includeAccount,reqAccountUpdate,hasFundOnly){
            let that = this;
            if(token != null && token != undefined && token != ''){
                that.win$.wsmsg.sendWsMsg({userLogin: wsmsg.UserLoginRequest.create(that.win$.wsmsg.addRequestId({
                            token : token,
                            includeUser : includeUser ,
                            includeAccount : includeAccount ,
                            reqAccountUpdate : reqAccountUpdate ,
                            hasFundOnly : hasFundOnly 
                        }))});
            }
        },
        //获取交易区的行情数据
        pollingSymbols(){
            let that = this;
            for(var i = 0 ; i <that.supportTradeRange.length ; i++){
                that.win$.wsmsg.sendWsMsg({symbolList: wsmsg.SymbolListRequest.create(that.win$.wsmsg.addRequestId({
                    watch: false ,
                    region : that.supportTradeRange[i]  
                }))});
            }
        },
        //请求用户订单信息
        getOrders(){
            let that = this;
            if(that.usertoken){
                 this.orderRequest(1,true); 
                this.orderRequest(1,false); 
            }
        },
        /**
         * 请求用户订单信息
         * @param page
         * @param activeOnly
         * @param reqTypeId
         * @returns
         */
        orderRequest(page,activeOnly ){
            let that = this;
            that.loadWin(3000);
            var order = wsmsg.OrderRequest.create(that.win$.wsmsg.addRequestId({ 
                                symbol : "",
                                orderStatus: 2 ,
                                page : page  ,
                                watch : true 
                            }))
            var reqId =  order.requestId ; 
            // if(activeOnly){
            // 	$('#user_active_orders').attr('get_user_order_req_id',reqId);
            // }else{
            // 	$("#user_inactivity_orders").attr('get_user_order_req_id',reqId);
            // }
            that.win$.wsmsg.sendWsMsg({order : order});
        },
        /**
         * 加载层
         * @param timeOut
         * @returns
         */
        loadWin(  timeOut   ){
            var index  = this.$layer.loading( 2, {    time: timeOut , shade: [0.8, '#000'] });
            return index ; 
        },
        /**
         * 
         * @param index
         * @returns
         */
        closeLoadWin(  index   ){
            if(index){
                this.$layer.close(index) ;
            }else{
                this.$layer.closeAll('loading') ;
            } 
        },
        onMouseMove({ offsetX, offsetY }){
            const valueMap = this.valueMap
            const canvas = this.canvas;
            //this.maskChart = this.$refs['chartMask']
            const maskContext = this.context
            const buyFillColor = this.buyFillColor
            const sellFillColor = this.sellFillColor
            const width = canvas.getAttribute('width');
            const height = canvas.getAttribute('height');
            for (let key of valueMap.keys()) {
                const x = key[0]
                const y = key[1]
                const side = key[2]
                const obj = valueMap.get(key)

                if (offsetX < x) {
                // console.log(key, valueMap.get(key))
                maskContext.strokeStyle = 'rgba(200,200,200,0.5)'
                maskContext.lineWidth = 1
                maskContext.setLineDash([2])
                maskContext.clearRect(0, 0, width, height)
                maskContext.beginPath()
                maskContext.moveTo(0, y)
                maskContext.lineTo(width, y)
                maskContext.stroke()
                maskContext.closePath()

                maskContext.beginPath()
                maskContext.moveTo(x, 0)
                maskContext.lineTo(x, height)
                maskContext.stroke()
                maskContext.closePath()

                maskContext.beginPath()
                maskContext.shadowBlur = 10
                maskContext.shadowColor = 'rgba(0,0,0,0.8)'
                // 小圆点
                maskContext.fillStyle = 'rgba(255,255,255, 1)'
                maskContext.arc(x, y, 5, 0, 2 * Math.PI)
                maskContext.fill()
                maskContext.closePath()

                maskContext.beginPath()
                // tips框
                maskContext.fillStyle = 'rgba(255,255,255, 1)'
                maskContext.font = '12px bold'
                let widthOffset = 120
                let heightOffset = 60
                let left = x - widthOffset / 2
                let top = y - heightOffset - 10
                let tipsPriceText = `${this.tipsPrice} ${utils.toThousand(obj.price)}`
                let tipsAmountText = `${this.tipsTotal} ${utils.toThousand(obj.total)}`
                let maxTextWidth = Math.max(maskContext.measureText(tipsPriceText).width, maskContext.measureText(tipsAmountText).width)
                if (maxTextWidth + 20 > widthOffset) {
                    widthOffset = maxTextWidth + 20
                }
                if (side === 'sell') {
                    // widthOffset = -widthOffset
                    // heightOffset = -heightOffset
                }
                if (left < 0) {
                    left = 0
                }
                if (left >= width - widthOffset) {
                    left = width - widthOffset
                }
                if (top <= 0) {
                    top = y + 10
                }

                maskContext.fillRect(left, top, widthOffset, heightOffset)

                maskContext.fillStyle = side === 'buy' ? buyFillColor : sellFillColor
                maskContext.textAlign = 'left'
                // maskContext.textBaseline = 'middle'
                maskContext.shadowBlur = 0

                const marginLeft = 10
                const marginTop = 25
                const lineHeight = 20
                maskContext.fillText(tipsPriceText, left + marginLeft, top + marginTop)
                maskContext.fillText(tipsAmountText, left + marginLeft, top + marginTop + lineHeight)
                maskContext.closePath()
                break
                }
            }
        },
        changeDepthData(){
            if(!this.canvas) return;
            var canvas = this.canvas;
            var context = this.context;
            let that = this;
            let data = {};
            let tempList = []
            data.buy = that.buySeries;
            data.sell = that.sellSeries;
            for(let i in data['buy']){
                var total = 0;
                for(let n=0; n<= i; n++){
                    data['buy'][n]['amount'] = data['buy'][n]['size'];
                    total += data['buy'][n]['amount'];
                }
                
                data['buy'][i]['total'] = total;
            }
            
            for(let i in data['sell']){
                var total = 0;
                for(let n=i; n< data['sell'].length; n++){
                    data['sell'][n]['amount'] = data['sell'][n]['size'];
                    total += data['sell'][n]['amount'];
                }
                
                data['sell'][i]['total'] = total;
            }
            
            
            var gap = 10; //X轴偏移量 防止左右两部分连接以利于美观
            
            var width = canvas.getAttribute('width');
            var height = canvas.getAttribute('height');
            
            //计算交易量的最大值，作为纵坐标的最大刻度值	
            var maxAmount = Math.max( data['sell'][0]['total'],  data['buy'][data['buy'].length-1]['total']);	
            
            var scaleH = maxAmount / height;
            
            //买卖各占一半宽度
            var scaleW = width / 2 / data['sell'].length;
            if(document.getElementById('layout'))
                canvas.width=document.getElementById('layout').offsetWidth;
            
            //开始一个连续绘制路径
            context.beginPath();
            context.fillStyle = '#0DA88B'; //设置买入区域填充颜色
            var x = 0;
            var y = 0;
            context.moveTo(width/2-gap, height);
            
            //从中间向上、向左绘制买单图
            for(let i in data['buy']){
                x = width/2 - i * scaleW-gap;
                y = height - data['buy'][i]['total']/maxAmount*height;
                if(data['buy'][0]['total']-data['buy'][0]['total']*i*0.1)
                context.lineTo(x, y);
                tempList.push({
                    x,
                    y,
                    value: data['buy'][i],
                    side: 'buy'
                })
            }
            
            context.lineTo(0, y); //延伸到最左侧边缘
            context.lineTo(0, height);
            context.lineTo(width/2-gap, height);
            context.fill(); //形成一个封装区域 并按fillStyle指定的颜色填充		
            context.closePath();
            
            //同上 开始绘制卖单深度图
            context.beginPath();
            context.fillStyle = '#EF5756';
            context.moveTo(width/2+gap, height);
            for(let i in data['sell']){
                var index =data['sell'].length - i -1;
                x = width/2 + i * scaleW + gap;
                y = height - data['sell'][index]['total']/maxAmount * height;
                context.lineTo(x,y);
                tempList.push({
                    x,
                    y,
                    value: data['sell'][index],
                    side: 'sell'
                })
            }
            
            // 按照X升序排列
            tempList = tempList.sort((a, b) => {
                return a.x - b.x
            })
            //
            tempList.forEach(item => {
                this.valueMap.set([item.x, item.y, item.side], item.value)
            })

            context.lineTo(width+gap, y);
            context.lineTo(width+gap, height);
            context.lineTo(width/2+gap, height);
            context.fill();	
            context.closePath();
            
            //X轴刻度
            var contextX = document.getElementById('x').getContext('2d');
            var contextY = document.getElementById('y').getContext('2d');

            document.getElementById('x').width = document.getElementById('x').width;
            document.getElementById('y').width = document.getElementById('y').width;
            contextX.fillStyle = '#ccc';
            contextY.fillStyle = '#ccc';
            
            for(let i in data['buy']){
                if(i%5) continue;
                x = width/2 - i * scaleW-60;
                y = 12;
                contextX.fillText(data['buy'][i]['price'], x, y);
            }
            
            for(let i in data['sell']){
                if(i%5) continue;
                x = width/2 + i * scaleW;
                y = 12;
                var index =data['sell'].length - i -1; 
                contextX.fillText(data['sell'][index]['price'], x, y);
            }
            
            //Y轴5等份
            var seg = maxAmount/5;
            for(let i=1; i<6; i++){
                x = 12;
                y = height - seg*i/maxAmount * height;
                contextY.fillText(seg*i > 1000 ? (seg*i/1000+'K'): seg*i, x, y);
            }

        },
        //接收返回数据
        getWsData(){
            let that = this;
            that.win$.wsmsg.setOnWsMsg(function (msg) {
                if (msg.code != 0 && msg.hasOwnProperty('code')) {
                    that.closeLoadWin(null);
                    if (msg.code >= 400 && msg.code <= 403) {
                        that.$layer.msg(msg.message, {
				 			  shadeClose : true,
							  shade: [0.8, '#000'],
							  anim : 6 ,
							  time :5000,
							  end : function (){
								  //$("#login_out_a_id").click() ;
							  }
							} );
                    }else if(msg.code==2010024){
                        that.$layer.msg(that.$t('l.add_124'));
                    }else if(msg.code==2010025){
                        that.$layer.msg(that.$t('l.add_125'));
                    }else if(msg.code==2010026){
                        that.$layer.msg(that.$t('l.add_126'));
                    }else if(msg.code==2010027){
                        that.$layer.msg(that.$t('l.add_127'));
                    }else{
						if(msg.constructor.name != 'BarResponse'&&msg.constructor.name != 'NotificationResponse'){
							that.hideMsgWin(msg.message, "" , 5000 ,6 );  
						} 
					}
                    return false;
                }
                switch (msg.constructor.name) {
                    case 'BarResponse':
                        that.kLinebars = msg.bars.reverse();
                        event.$emit('onhistorycallback',that.kLinebars);
                        //console.log("我是币币交易历史数据++++++++++++");
                        break;
                    case 'BarUpdateResponse':
                        that.newbar = msg.bar;
                        //console.log("我是币币交易新增数据++++++++++++");
                        break;
                    case 'WatchListResponse':
                        //console.log(' 自选请求响应 ',msg);
                        trade.assembleSymbols(msg);
                        that.currentPair = trade.getCurrentPair();
                        break;
                    case 'DepthResponse':
                        //console.log(' 挂单深度请求相应 ',msg);
                        that.sellSeries = trade.refreshDepthAsksData(msg);
                        that.buySeries = trade.refreshDepthBidsData(msg);
                        let len = that.sellSeries.length;
                        if(that.sellSeries.length>0){
                            that.limit_sell_price = that.sellSeries[len-1].price;
                            that.on_input_bid_vol(1);
                        }
                        if(that.buySeries.length>0){
                            that.limit_buy_price = that.buySeries[0].price;
                            that.on_input_ask_rate(0);
                        }
                        if(that.sellSeries.length>0 && that.buySeries.length>0){
                            that.changeDepthData();
                        }
                        break;
                    case 'DepthUpdateResponse':
                        //console.log(' 挂单深度更新推送 ',msg);
                        that.sellSeries = trade.refreshDepthAsksData(msg);
                        that.buySeries = trade.refreshDepthBidsData(msg);
                        if(that.sellSeries.length>0 && that.buySeries.length>0){
                            that.changeDepthData();
                        }
                        break;
                    case 'TradeResponse':
                        //console.log(' 最近成交请求响应 ',msg);
                        that.tradeRecord = trade.refreshTradeHistory(msg);
                        break;
                    case 'TradeUpdateResponse':
                        //console.log(' 最近成交更新推送 ',msg);
                        that.tradeRecord = trade.refreshTradeHistory(msg);
                        break;
                    case 'MasterDataResponse':
                        //console.log(' 主数据请求响应 ',msg);
                        that.symbols = trade.assembleSymbols(msg);
                        that.currentPair = trade.getCurrentPair();
                        break;
                    case 'SymbolListResponse':
                        //console.log(' 所有交易对行情请求响应 ',msg);
                        that.symbols = trade.assembleSymbols(msg);
                        that.currentPair = trade.getCurrentPair();
                        break;
                    case 'HomeSymbolListResponse':
                        //console.log(' 所有交易对行情请求响应 ',msg);
                        that.symbols = trade.assembleSymbols(msg);
                        that.currentPair = trade.getCurrentPair();
                        break;
                    case 'QuoteUpdateResponse':
                        //console.log(' 交易行情更新推送 ',msg);
                        that.symbols = trade.assembleSymbols(msg);
                        that.currentPair = trade.getCurrentPair();
                        break;
                    case 'UserLoginResponse':
                        trade.assembleUserInfo(msg);
                        that.accountInfo = trade.refreshAccountInfo();
                        that.orderRequest(1, true);
                        that.watchListRequest();
                        break;
                    case 'UserAccountUpdateResponse':
                        trade.assembleUserInfo(msg);
                        that.accountInfo = trade.refreshAccountInfo();
                        break;
                    case 'OrderResponse':
                        that.closeLoadWin(null);
                        that.orders = trade.assembleUserOrders(msg);
                        //refreshOrder();
                        break;
                    case 'OrderUpdateResponse':
                        that.orders = trade.assembleUserOrders(msg);
                        //refreshOrder();
                        break;
                    case 'PlaceOrderResponse':
                         if(msg.code==0){
                            that.hideMsgWin(that.$t('l.add_114'), "", 2000, 5);
                         }else{
                             that.hideMsgWin(msg.message, "", 2000, 5);
                         }
                        
                        that.closeLoadWin(null);
                        break;
                    case 'QuoteResponse':
                        trade.assembleSymbols(msg);
                        that.quote = trade.refreshCurrentPair();
                        that.currentPair = trade.getCurrentPair();
                        that.quoteCurrencyName = that.quote.quoteCurrencyName;
                        break;
                    case 'CancelOrderResponse':
                        that.orders = trade.assembleUserOrders(msg);
                        //refreshOrder();
                        that.closeLoadWin(null);
                        that.hideMsgWin(msg.message, "", 2000, 5);
                        break;
                    case 'WatchListEditResponse':
                        that.closeLoadWin(null);
                        that.watchListRequest();
                        break;
                }
            })
        }

    },
    mounted(){
       this.initPageData();
       this.getWsData();
       //this.getOrders();
       // 轮询3个交易区的行情数据 
      // this.interval = window.setInterval(  this.pollingSymbols , 3000 );
       
       this.$nextTick(() => {
           this.scroll = new BScroll(this.$refs.scrollwrap, {
               mouseWheel:true
           })
           this.canvas=document.getElementById('depth');
           this.context=this.canvas.getContext('2d');
       })
        this.win$.wsmsg.sendThis(this);
        // let that = this;
        // setTimeout(() => {
        //     that.win$.wsmsg.close();
        // }, 15000);
    },
    destroyed() {
        //this.win$.wsmsg.close();
        clearInterval(this.interval);
    }
}
</script>




